<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 3 + Element UI 布局示例</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  
  <!-- 引入Element UI CSS -->
  <link href="https://cdn.jsdelivr.net/npm/element-plus@2.3.8/dist/index.min.css" rel="stylesheet">
  <!-- 引入Element UI JS -->
  <script src="https://cdn.jsdelivr.net/npm/element-plus@2.3.8/dist/index.min.js"></script>
  <!-- 引入Vue 3 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@3.4.17/dist/vue.global.prod.min.js"></script>
</head>
<body class="bg-gray-50 font-sans">
  <div id="app" class="min-h-screen flex flex-col">
    <!-- 顶部区域 -->
    <header class="bg-white shadow-md py-3 px-6 flex justify-between items-center h-16">
      <!-- 左侧Logo -->
      <div class="flex items-center">
        <div class="text-2xl font-bold text-primary flex items-center">
          <i class="fa fa-line-chart mr-2"></i>
          <span>数据可视化平台</span>
        </div>
      </div>
      
      <!-- 右侧菜单 -->
      <div class="flex items-center space-x-4">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link cursor-pointer text-gray-700 hover:text-primary transition-colors duration-200">
            <i class="fa fa-user-circle mr-1"></i> 管理员 <i class="fa fa-caret-down ml-1"></i>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <i class="fa fa-user mr-2"></i>个人信息
              </el-dropdown-item>
              <el-dropdown-item>
                <i class="fa fa-cog mr-2"></i>设置
              </el-dropdown-item>
              <el-dropdown-item divided>
                <i class="fa fa-sign-out mr-2"></i>退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </header>

    <!-- 中间区域 -->
    <main class="flex-grow p-4 grid grid-cols-3 grid-rows-3 gap-4 overflow-auto">
      <!-- 图表1 -->
      <div class="bg-white rounded-lg shadow-md p-4 col-span-1 row-span-1 hover:shadow-lg transition-shadow duration-300">
        <h3 class="text-lg font-semibold mb-2 text-gray-700">折线图</h3>
        <div class="h-full w-full" ref="chart1"></div>
      </div>
      
      <!-- 图表2 -->
      <div class="bg-white rounded-lg shadow-md p-4 col-span-1 row-span-1 hover:shadow-lg transition-shadow duration-300">
        <h3 class="text-lg font-semibold mb-2 text-gray-700">柱状图</h3>
        <div class="h-full w-full" ref="chart2"></div>
      </div>
      
      <!-- 图表3 -->
      <div class="bg-white rounded-lg shadow-md p-4 col-span-1 row-span-1 hover:shadow-lg transition-shadow duration-300">
        <h3 class="text-lg font-semibold mb-2 text-gray-700">饼图</h3>
        <div class="h-full w-full" ref="chart3"></div>
      </div>
      
      <!-- 图表4 -->
      <div class="bg-white rounded-lg shadow-md p-4 col-span-1 row-span-1 hover:shadow-lg transition-shadow duration-300">
        <h3 class="text-lg font-semibold mb-2 text-gray-700">雷达图</h3>
        <div class="h-full w-full" ref="chart4"></div>
      </div>
      
      <!-- 图表5 -->
      <div class="bg-white rounded-lg shadow-md p-4 col-span-1 row-span-1 hover:shadow-lg transition-shadow duration-300">
        <h3 class="text-lg font-semibold mb-2 text-gray-700">散点图</h3>
        <div class="h-full w-full" ref="chart5"></div>
      </div>
      
      <!-- 图表6 -->
      <div class="bg-white rounded-lg shadow-md p-4 col-span-1 row-span-1 hover:shadow-lg transition-shadow duration-300">
        <h3 class="text-lg font-semibold mb-2 text-gray-700">仪表盘</h3>
        <div class="h-full w-full" ref="chart6"></div>
      </div>
      
      <!-- 图表7 -->
      <div class="bg-white rounded-lg shadow-md p-4 col-span-1 row-span-1 hover:shadow-lg transition-shadow duration-300">
        <h3 class="text-lg font-semibold mb-2 text-gray-700">热力图</h3>
        <div class="h-full w-full" ref="chart7"></div>
      </div>
      
      <!-- 图表8 -->
      <div class="bg-white rounded-lg shadow-md p-4 col-span-1 row-span-1 hover:shadow-lg transition-shadow duration-300">
        <h3 class="text-lg font-semibold mb-2 text-gray-700">树状图</h3>
        <div class="h-full w-full" ref="chart8"></div>
      </div>
      
      <!-- 图表9 -->
      <div class="bg-white rounded-lg shadow-md p-4 col-span-1 row-span-1 hover:shadow-lg transition-shadow duration-300">
        <h3 class="text-lg font-semibold mb-2 text-gray-700">词云图</h3>
        <div class="h-full w-full" ref="chart9"></div>
      </div>
    </main>

    <!-- 底部区域 -->
    <footer class="bg-white shadow-inner py-3 px-6 text-center text-gray-600 text-sm h-12 flex items-center justify-center">
      <p>© 2025 数据可视化平台 | 版权所有</p>
    </footer>
  </div>

  <script>
    const { createApp, ref, onMounted, nextTick } = Vue;
    
    const app = createApp({
      setup() {
        const chart1 = ref(null);
        const chart2 = ref(null);
        const chart3 = ref(null);
        const chart4 = ref(null);
        const chart5 = ref(null);
        const chart6 = ref(null);
        const chart7 = ref(null);
        const chart8 = ref(null);
        const chart9 = ref(null);
        
        // 初始化图表
        const initCharts = () => {
          // 图表1：折线图
          const lineChart = echarts.init(chart1.value);
          lineChart.setOption({
            xAxis: {
              type: 'category',
              data: ['1月', '2月', '3月', '4月', '5月', '6月']
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: [820, 932, 901, 934, 1290, 1330],
              type: 'line',
              smooth: true,
              itemStyle: {
                color: '#409EFF'
              }
            }]
          });
          
          // 图表2：柱状图
          const barChart = echarts.init(chart2.value);
          barChart.setOption({
            xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: [120, 200, 150, 80, 70, 110, 130],
              type: 'bar',
              itemStyle: {
                color: '#67C23A'
              }
            }]
          });
          
          // 图表3：饼图
          const pieChart = echarts.init(chart3.value);
          pieChart.setOption({
            series: [{
              name: '访问来源',
              type: 'pie',
              radius: '65%',
              center: ['50%', '50%'],
              data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }]
          });
          
          // 图表4：雷达图
          const radarChart = echarts.init(chart4.value);
          radarChart.setOption({
            radar: {
              indicator: [
                { name: '销售', max: 6500 },
                { name: '管理', max: 16000 },
                { name: '信息技术', max: 30000 },
                { name: '客服', max: 38000 },
                { name: '研发', max: 52000 },
                { name: '市场', max: 25000 }
              ]
            },
            series: [{
              name: '预算 vs 开销',
              type: 'radar',
              data: [
                {
                  value: [4300, 10000, 28000, 35000, 50000, 19000],
                  name: '预算分配'
                },
                {
                  value: [5000, 14000, 28000, 31000, 42000, 21000],
                  name: '实际开销'
                }
              ]
            }]
          });
          
          // 图表5：散点图
          const scatterChart = echarts.init(chart5.value);
          scatterChart.setOption({
            xAxis: {},
            yAxis: {},
            series: [{
              symbolSize: 20,
              data: [
                [10.0, 8.04],
                [8.0, 6.95],
                [13.0, 7.58],
                [9.0, 8.81],
                [11.0, 8.33],
                [14.0, 9.96],
                [6.0, 7.24],
                [4.0, 4.26],
                [12.0, 10.84],
                [7.0, 4.82],
                [5.0, 5.68]
              ],
              type: 'scatter',
              itemStyle: {
                color: '#E6A23C'
              }
            }]
          });
          
          // 图表6：仪表盘
          const gaugeChart = echarts.init(chart6.value);
          gaugeChart.setOption({
            series: [{
              name: '业务指标',
              type: 'gauge',
              detail: {formatter: '{value}%'},
              data: [{value: 58, name: '完成率'}]
            }]
          });
          
          // 图表7：热力图
          const heatmapChart = echarts.init(chart7.value);
          heatmapChart.setOption({
            tooltip: {},
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
              type: 'category',
              data: ['上午', '下午', '晚上']
            },
            visualMap: {
              min: 0,
              max: 100,
              orient: 'horizontal',
              left: 'center',
              bottom: '10%'
            },
            series: [{
              name: '访问量',
              type: 'heatmap',
              data: [
                [0, 0, 5], [0, 1, 1], [0, 2, 0], [1, 0, 8], [1, 1, 5], [1, 2, 7],
                [2, 0, 3], [2, 1, 1], [2, 2, 6], [3, 0, 6], [3, 1, 3], [3, 2, 9],
                [4, 0, 2], [4, 1, 4], [4, 2, 5], [5, 0, 8], [5, 1, 7], [5, 2, 3],
                [6, 0, 4], [6, 1, 3], [6, 2, 8]
              ],
              label: {
                show: true
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }]
          });
          
          // 图表8：树状图
          const treeChart = echarts.init(chart8.value);
          treeChart.setOption({
            series: [{
              type: 'tree',
              data: [{
                name: 'TOP',
                children: [
                  {
                    name: 'Level 1-1',
                    children: [
                      { name: 'Level 2-1' },
                      { name: 'Level 2-2' }
                    ]
                  },
                  {
                    name: 'Level 1-2',
                    children: [
                      { name: 'Level 2-3' },
                      { name: 'Level 2-4' },
                      { name: 'Level 2-5' }
                    ]
                  }
                ]
              }],
              layout: 'radial',
              symbol: 'emptyCircle',
              symbolSize: 7,
              initialTreeDepth: -1,
              animationDurationUpdate: 750
            }]
          });
          
          // 图表9：词云图
          const wordcloudChart = echarts.init(chart9.value);
          wordcloudChart.setOption({
            series: [{
              type: 'wordCloud',
              sizeRange: [12, 60],
              rotationRange: [-90, 90],
              shape: 'circle',
              textStyle: {
                normal: {
                  color: function() {
                    return 'rgb(' + [
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160)
                    ].join(',') + ')';
                  }
                },
                emphasis: {
                  shadowBlur: 10,
                  shadowColor: '#333'
                }
              },
              data: [
                {name: 'Sam S Club', value: 10000},
                {name: 'Macys', value: 6181},
                {name: 'Amy Schumer', value: 4386},
                {name: 'Jurassic World', value: 4055},
                {name: 'Charter Communications', value: 2467},
                {name: 'Chick Fil A', value: 2244},
                {name: 'Planet Fitness', value: 1898},
                {name: 'Pitch Perfect', value: 1484},
                {name: 'Express', value: 1112},
                {name: 'Home', value: 965},
                {name: 'Johnny Depp', value: 847},
                {name: 'Lena Dunham', value: 582},
                {name: 'Lewis Hamilton', value: 555},
                {name: 'KXAN', value: 550},
                {name: 'Mary Ellen Mark', value: 462},
                {name: 'Farrah Abraham', value: 366},
                {name: 'Rita Ora', value: 360},
                {name: 'Serena Williams', value: 282},
                {name: 'NCAA baseball tournament', value: 273},
                {name: 'Point Break', value: 265}
              ]
            }]
          });
          
          // 监听窗口大小变化，自适应图表
          window.addEventListener('resize', () => {
            lineChart.resize();
            barChart.resize();
            pieChart.resize();
            radarChart.resize();
            scatterChart.resize();
            gaugeChart.resize();
            heatmapChart.resize();
            treeChart.resize();
            wordcloudChart.resize();
          });
        };
        
        onMounted(() => {
          // 等待DOM渲染完成后初始化图表
          nextTick(() => {
            initCharts();
          });
        });
        
        return {
          chart1,
          chart2,
          chart3,
          chart4,
          chart5,
          chart6,
          chart7,
          chart8,
          chart9
        };
      }
    });
    
    // 注册Element UI组件
    app.use(ElementPlus);
    
    // 挂载应用
    app.mount('#app');
  </script>
</body>
</html>
  